"use client";
import FileMenu from "@/app/components/FileMenu";
import { useState, useEffect, use } from "react";
import axios from "axios";
export default function MergePdf(props) {
  const params = use(props.params);
  const [pdfInfos, setPdfInfos] = useState([{ name: "" }]);

  const itemStyle = {
    float: "right",
    padding: "3px 0 2px 8px",
    zIndex: "5",
  };

  const pStyle = {
    fontSize: "90%",
    margin: 0,
    padding: "0 0 20px",
  };

  useEffect(() => {
    const fetchData = async () => {
      axios({
        method: "post",
        url: "http://localhost:3001/pdfinfo",
        headers: {
          "Content-Type": "application/json",
          Accept: "*/*",
        },
        body: JSON.stringify({
          pdfNames: decodeURIComponent(params.slug).split(","),
        }),
      })
        .then((response) => {
          var data = response.data;
          setPdfInfos(data["data"]["files"]);
        })
        .catch((error) => console.error("Error:", error));
    };
    fetchData();
  }, [params.slug]);

  function FileList() {
    return (
      <ol id="filelist">
        {pdfInfos.map((it, index) => (
          <li data-file={it["name"]} draggable="false" className="" key={index}>
            <a
              style={itemStyle}
              href={"/download/" + it["name"]}
              title={"Download" + it["name"]}
              draggable="false"
            >
              <img
                width="18"
                height="18"
                src="/img/save.svg"
                alt="Download"
                draggable="false"
              />
            </a>
            <a
              style={itemStyle}
              href={"/merge/" + it["name"]}
              title={"Remove " + it["name"]}
              draggable="false"
            >
              <img
                width="18"
                height="18"
                src="/img/delete.svg"
                alt="Remove"
                draggable="false"
              />
            </a>
            <img
              src={
                "https://i4.pdfresizer.com/tmp/thb-" + it["name"] + "-01.jpg"
              }
              className="thb"
              alt=""
              title={it}
              draggable="false"
            />
            <strong>{it["name"]}</strong>
            <span className="params">
              Size: 1,26 MB, pages: 73, paper: 334.084 x 501.955 pts
            </span>
          </li>
        ))}
      </ol>
    );
  }

  return (
    <>
      <FileMenu pdfName={params.slug}></FileMenu>

      <ol id="filelist">
        <FileList></FileList>
      </ol>
      <form
        id="action-params"
        className="ajax-form"
        action="/merge/0b499388f1i5.pdf"
        method="POST"
      >
        <p style={pStyle}>
          Hint: you can drag and drop the files to order them as you wish!
        </p>
        <input
          id="sbmt"
          className="action-button active"
          value="Generate PDF! »"
          type="submit"
          name="submit"
        />
      </form>
    </>
  );
}
